Javascript << Previous Next >> Project

HTML and CSS

HTML & CSS 初學者學習指南

一、HTML 與 CSS 是什麼？

HTML（超文件標記語言）：負責「網頁內容」與「結構」的描述，是網頁的骨架。
CSS（層疊樣式表）：負責「網頁外觀、樣式、版面」的設計，是網頁的皮膚與裝飾。
兩者配合，讓你能打造美觀、結構良好的網站。

二、學習步驟建議

了解 HTML 與 CSS 各自用途與基本概念。
從基礎標籤（如 <h1>、<p>、<img>）與基本樣式（如顏色、字體、邊距）學起。
邊學邊練習：可用 CodePen、JSFiddle、本地文字編輯器練習。
模仿簡單網頁，了解版型與排版原理。
逐步學習表格、表單、版面配置（如 Flexbox、Grid）。
挑戰自製個人履歷網頁、作品集、Landing Page 等小專案。

三、HTML 必學標籤與語法

標籤	用途	範例
`<h1>` ~ `<h6>`	標題（h1 最大）	`<h1>主標題</h1>`
`<p>`	段落文字	`<p>這是一段文字。</p>`
`<a>`	超連結	`<a href="https://google.com">Google</a>`
`<img>`	插入圖片	`<img src="cat.jpg" alt="貓咪">`
`<ul>`、`<ol>`、`<li>`	無序/有序清單	`<ul> <li>項目1</li> <li>項目2</li> </ul>`
`<div>` / `<span>`	區塊/行內分組、CSS 樣式輔助	`<div class="box">內容</div>`
`<table>`、`<tr>`、`<td>`	表格	`<table> <tr><td>A</td><td>B</td></tr> </table>`
`<form>`、`<input>`	表單與輸入欄位	`<form> <input type="text" placeholder="姓名"> </form>`

四、CSS 必學語法與範例

基本選擇器：元素、.類別、#ID
常用屬性：color（文字顏色）、background（背景）、font-size、width、height、margin、padding、border
文字對齊（text-align）、區塊對齊（display、flex、grid）
CSS 寫法可在 <style> 標籤、style 屬性或獨立 .css 檔案


/* 樣式檔範例 */
h1 {
    color: #2d7f5e;
    font-size: 2em;
    text-align: center;
}
.box {
    background: #eaffea;
    padding: 1em;
    border-radius: 8px;
    margin-bottom: 1em;
}
#main {
    width: 80%;
    margin: auto;
}

小技巧：

多善用瀏覽器「檢查元素」功能，調整 CSS 效果。
CSS 有「繼承」與「選擇器優先權」概念，遇到樣式衝突時要注意。

五、常見練習與專案

練習製作個人履歷網頁、名片網站、簡單 Landing Page。
模仿喜歡的網站版型，重新切版練習。
挑戰 CSS Flexbox、Grid 排版。
試著設計表單、導航列、圖文混排區塊。

六、常見錯誤與學習建議

常見錯誤：

HTML 標籤忘記閉合、層級錯誤。
CSS 拼字錯誤、屬性寫錯或分號遺漏。
選擇器優先權搞混，導致樣式沒套用。
class 與 id 用法混淆。

多手寫、多練習，熟悉標籤與屬性。
常用 MDN Web Docs 查詢 HTML/CSS 語法。
參加線上挑戰如 Frontend Mentor、CSS Battle。

七、進階主題推薦

RWD 響應式網頁設計（media query）
CSS 動畫與過渡（animation, transition）
SCSS/SASS 等 CSS 預處理器
Bootstrap、Tailwind CSS 等框架
網頁無障礙（a11y）設計

Javascript << Previous Next >> Project